import { CommandGroup, CommandItem, CommandSeparator } from "../ui/command";
import { useEditor } from "novel";
import { Check, TextQuote, TrashIcon } from "lucide-react";

// AICompletionCommands 组件用于展示完成选项的命令项
const AICompletionCommands = ({
  completion, // 完成的文本内容
  onDiscard, // 处理丢弃操作的回调函数
}: {
  completion: string;
  onDiscard: () => void;
}) => {
  // 使用 useEditor hook 获取编辑器实例
  const { editor } = useEditor();

  return (
    <>
      {/* 命令组：替换和插入操作 */}
      <CommandGroup>
        {/* 替换选项 */}
        <CommandItem
          className="gap-2 px-4"
          value="replace"
          onSelect={() => {
            // 获取当前选区
            const selection = editor.view.state.selection;

            // 执行替换操作
            editor
              .chain()
              .focus()
              .insertContentAt(
                {
                  from: selection.from,
                  to: selection.to,
                },
                completion,
              )
              .run();
          }}
        >
          <Check className="h-4 w-4 text-muted-foreground" />
          Replace selection
        </CommandItem>

        {/* 在光标下方插入选项 */}
        <CommandItem
          className="gap-2 px-4"
          value="insert"
          onSelect={() => {
            // 获取当前选区
            const selection = editor.view.state.selection;

            // 执行插入操作
            editor
              .chain()
              .focus()
              .insertContentAt(selection.to + 1, completion)
              .run();
          }}
        >
          <TextQuote className="h-4 w-4 text-muted-foreground" />
          Insert below
        </CommandItem>
      </CommandGroup>

      {/* 分隔线 */}
      <CommandSeparator />

      {/* 命令组：丢弃操作 */}
      <CommandGroup>
        <CommandItem onSelect={onDiscard} value="thrash" className="gap-2 px-4">
          <TrashIcon className="h-4 w-4 text-muted-foreground" />
          Discard
        </CommandItem>
      </CommandGroup>
    </>
  );
};

export default AICompletionCommands;
